<template>
	<view class="list-item zy-col" @click="navTo(to)">
		<image :src="imageUrl"></image>
		<text>{{title}}</text>
		<text v-if="count" class="icon-mark">{{count>99?'99+':count}}</text>
	</view>
</template>

<script>
	/**
	 * v-tabs
	 * @property {Number,String} title 标题
	 * @property {String} to 跳转路由
	 * @property {String} imageUrl 图片
	 * @property {String,Number} count 数字角标
	 *
	 */
	export default {
		name:"item-icon",
		props:{
			to:{
				type:String,
				default:""
			},
			title:{
				type:[String,Number],
				default:"标题"
			},
			count:{
				type:[String,Number],
				default:""
			},
			imageUrl:{
				type:String,
				default:"/static/home/home_icon_pick_up.png"
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			navTo(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.zy-row{
		display: flex;
		flex-direction: row;
	}
	
	.list-item{
		position: relative;
		align-items: center;
		.icon-mark{
			width: 52rpx;
			height: 32rpx;
			line-height: 32rpx;
			text-align: center;
			position: absolute;
			top: -20rpx;
			right: -20rpx;
			background: #FFEEF2;
			border-radius: 49rpx;
			font-size: 18rpx;
			color: #FF4271;
		}
		image{
			width: 68rpx;
			height: 68rpx;
		}
		text{
			margin-top: 8rpx;
			font-size: 26rpx;
		}
	}
</style>